<template>
  <div class="ui-stars">
    <span
      v-for="num in 5"
      :key="num"
      :class="[
        'iconfont icon-star',
        num <= starNum ? 'active' : ''
      ]"
      :style="{ fontSize: size + 'px' }"
      @click="setStarNum(num)"
    ></span>
  </div>
</template>

<script>
import { useStars } from '../../hooks';

export default {
  name: 'Stars',
  props: {
    num: {
      type: Number,
      default: 0
    },
    size: {
      type: Number,
      default: 16
    },
  },
  setup(props, { emit }) {
    const [ starNum, setStarNum ] = useStars(props.num, (num) => {
      emit('getStarNum', num);
    });

    return {
      starNum,
      setStarNum
    }
  }
}
</script>

<style lang="scss" scoped>
  @font-face {
    font-family: "iconfont"; /* Project id 3309945 */
    src: url('//at.alicdn.com/t/font_3309945_tnshj0nvot.woff2?t=1649319161154') format('woff2'),
        url('//at.alicdn.com/t/font_3309945_tnshj0nvot.woff?t=1649319161154') format('woff'),
        url('//at.alicdn.com/t/font_3309945_tnshj0nvot.ttf?t=1649319161154') format('truetype');
  }

  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #999;

    &.icon-star {
      transition: color .3s;
    }

    &.icon-star:before {
      content: "\e63e";
    }

    &.active {
      color: #fbab06;
    }
  }

  .ui-stars {

    span {
      cursor: pointer;
    }
  }

</style>